<template>
  <div class="list-page">
    <div class="list-page__search" v-if="searchShow && showSearch">
      <slot name="search"></slot>
    </div>
    <div class="list-page__actions reset" v-if="showActions">
      <div class="fl">
        <slot name="actions"></slot>
      </div>
      <slot name="toolbar">
        <right-toolbar
          :search="searchIcon"
          v-model:show-search="searchShow"
          @refresh="emit('getList', false)"
          v-if="showToolbar" />
      </slot>
    </div>
    <div class="list-page__body">
      <slot></slot>
    </div>
    <div class="list-page__footer" v-if="showPage">
      <slot name="pagination">
        <span class="left-text">{{ footerLeft }}</span>
        <pagination
          style="flex-shrink: 0"
          v-show="total > 0"
          :total="total"
          v-model:page="currentPage"
          v-model:limit="limitSize"
          @pagination="emit('getList')" />
      </slot>
    </div>
  </div>
</template>
<script setup name="ListPage">
  import RightToolbar from '@/components/system/RightToolbar'
  const props = defineProps({
    showSearch: {
      // 顶部搜索表单
      type: Boolean,
      default: true
    },
    searchIcon: {
      // 是否显示检索图标
      type: Boolean,
      default: true
    },
    showActions: {
      // 整个中间工具栏
      type: Boolean,
      default: true
    },
    showToolbar: {
      // 右侧工具栏
      type: Boolean,
      default: true
    },
    showPage: {
      // 底部分页
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    footerLeft: String
  })

  const currentPage = defineModel('pageNum', { default: 1 })
  const limitSize = defineModel('pageSize', { default: 10 })
  const searchShow = ref(true)
  const emit = defineEmits(['getList'])
</script>

<style lang="scss" scoped>
  .list-page {
    &__actions {
      margin-bottom: 8px;
      overflow: hidden;
    }

    &__footer {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      .left-text {
        margin: 15px 15px 0 0;
        padding: 6px 0;
        line-height: 20px;
        flex-grow: 1;
      }
    }
	:deep(.pagination-container) {
        margin-top: 10px;
        margin-bottom: 0;
    }
	:deep(.pagination-container .el-pagination) {
	    position: relative;
	}
  }
</style>
